<template>
  <span v-if="themeBar">
    <svg-icon
      title="系统配置"
      icon-class="years"
      @click="handleOpenThemeBar"
    />

    <el-drawer
      title="系统配置"
      :visible.sync="drawerVisible"
      direction="rtl"
      append-to-body
      size="470px"
    >
      <el-scrollbar style="height: 70vh; overflow: hidden">
        <div class="el-drawer__body">
          <el-form
            ref="form"
            :model="theme"
            label-position="left"
          >
            <el-form-item label="年度切换">
              <el-select v-model="theme.years" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in yearOptions"
                  :key="item.annualId"
                  :label="item.year + '年'"
                  :value="item.year"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-top: 40px">
              <el-button
                type="primary"
                @click="handleSaveTheme"
              >
                保存
              </el-button>
              <el-button
                type=""
                @click="drawerVisible = false"
              >取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </el-drawer>
  </span>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { layout as defaultLayout } from '@/config'
export default {
  name: 'VabThemeBar',
  data() {
    return {
      drawerVisible: false,
      theme: {
        name: 'default',
        header: 'fixed',
        tabsBar: '',
        years: '2022',
        work: 'graduates'
      },
      yearOptions: []
    }
  },
  computed: {
    ...mapGetters({
      header: 'settings/header',
      tabsBar: 'settings/tabsBar',
      themeBar: 'settings/themeBar',
      years: 'settings/years'
    })
  },
  created() {
    this.$baseEventBus.$on('theme', () => {
      this.handleOpenThemeBar()
    })
    const theme = localStorage.getItem('bss-web-theme')
    if (theme !== null) {
      this.theme = JSON.parse(theme)
      this.handleSetTheme()
    } else {
      this.theme.header = this.header
      this.theme.tabsBar = this.tabsBar
      this.theme.years = this.years
      this.theme.work = this.work
    }
  },
  methods: {
    ...mapActions({
      changeHeader: 'settings/changeHeader',
      changeTabsBar: 'settings/changeTabsBar',
      changeYears: 'settings/changeYears'
    }),
    handleIsMobile() {
      return document.body.getBoundingClientRect().width - 1 < 992
    },
    handleOpenThemeBar() {
      this.drawerVisible = true
    },
    handleSetTheme() {
      const { name, header, tabsBar, years, work } = this.theme
      localStorage.setItem(
        'bss-web-theme',
        `{
            "name":"${name}",
            "header":"${header}",
            "tabsBar":"${tabsBar}",
            "work":"${work}",
            "years":"${years}"
          }`
      )
      this.changeHeader(header)
      this.changeTabsBar(tabsBar)
      this.changeYears(years)
      document.getElementsByTagName(
        'body'
      )[0].className = `bss-web-theme-${name}`
      this.drawerVisible = false
    },
    handleSaveTheme() {
      const { years, work } = this.theme
    },
    handleSetDfaultTheme() {
      const { name } = this.theme
      document
        .getElementsByTagName('body')[0]
        .classList.remove(`bss-web-theme-${name}`)
      localStorage.removeItem('bss-web-theme')
      this.$refs['form'].resetFields()
      Object.assign(this.$data, this.$options.data())
      this.changeHeader(defaultLayout)
      this.theme.name = 'default'
      this.theme.header = this.header
      this.theme.tabsBar = this.tabsBar
      this.drawerVisible = false
      location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
  @mixin right-bar {
    position: fixed;
    right: 0;
    z-index: $base-z-index;
    //width: 60px;
    //min-height: 60px;
    text-align: center;
    cursor: pointer;
    //background: $base-color-blue;
    //border-radius: $base-border-radius;

    > div {
      padding-top: 10px;
      border-bottom: 0 !important;

      &:hover {
        opacity: 0.9;
      }

      & + div {
        border-top: 1px solid $base-color-white;
      }

      p {
        padding: 0;
        margin: 0;
        font-size: $base-font-size-small;
        line-height: 30px;
        color: $base-color-white;
      }
    }
  }

  .theme-bar-setting {
    @include right-bar;

    top: calc((100vh - 110px) / 2);

    ::v-deep {
      svg:not(:root).svg-inline--fa {
        display: block;
        margin-right: auto;
        margin-left: auto;
        color: $base-color-white;
      }

      .svg-icon {
        display: block;
        margin-right: auto;
        margin-left: auto;
        font-size: 20px;
        color: $base-color-white;
        fill: $base-color-white;
      }
    }
  }

  .el-drawer__body {
    padding: 20px;
  }
</style>
<style lang="scss">
  .el-drawer__wrapper {
    outline: none !important;

    * {
      outline: none !important;
    }
  }

  .vab-color-picker {
    .el-color-dropdown__link-btn {
      display: none;
    }
  }
  .show {
    transition: all .3s cubic-bezier(.7, .3, .1, 1);

    .rightPanel-background {
      z-index: 20000;
      opacity: 1;
      width: 100%;
      height: 100%;
    }

    .rightPanel {
      transform: translate(0);
    }
  }
  .handle-button {
    width: 48px;
    height: 48px;
    position: absolute;
    left: -48px;
    text-align: center;
    font-size: 24px;
    border-radius: 6px 0 0 6px !important;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
    color: #fff;
    background: $base-color-blue;
    line-height: 48px;
    i {
      font-size: 24px;
      line-height: 48px;
    }
  }
</style>
